<template>
  <div class="page flex-col">
    <div class="group_1 flex-col">
      <div class="group_2 flex-col">
        <div class="box_1 flex-row">
          <span class="text_1">格暖智慧热力系统</span>
          <img
            class="label_1"
            referrerpolicy="no-referrer"
            src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngf92802d6513a50ca894293fca7642a1749da6c8d214bff22f8b8c1ba43ca4441"
          />
          <span class="text_2">新农可视化平台</span>
          <span class="text_3 nowDay">{{ nowDay }}</span>
        </div>
        <div class="box_2 flex-col">
          <div class="group_3 flex-row justify-between">
            <div class="group_4 flex-col justify-between">
              <div class="box_3 flex-col">
                <div class="image-wrapper_1 flex-row">
                  <img
                    class="image_1"
                    referrerpolicy="no-referrer"
                    src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngb3e5a412e0e750357a8aabdd57881cd64fdaf59962bd6c9739a520a8d294a2e7"
                  />
                </div>
                <div class="text-wrapper_1 flex-row justify-between">
                  <span style="margin-left: 14px" class="text_5"
                    >{{ transW(detail.annualOrderAmount) }}&nbsp;万</span
                  >
                  <span class="text_6">{{ detail.annualOrderCount || 0 }}&nbsp;件</span>
                </div>
                <div class="text-wrapper_2 flex-row justify-between">
                  <span class="text_7">年销售额</span>
                  <span class="text_8">年订单量</span>
                </div>
                <span class="text_9">生产数据</span>
              </div>
              <div class="box_4 flex-col">
                <img
                  class="image_2"
                  referrerpolicy="no-referrer"
                  src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngb3e5a412e0e750357a8aabdd57881cd64fdaf59962bd6c9739a520a8d294a2e7"
                />
                <div class="section_1 flex-row justify-between">
                  <div
                    @click="onVideoClick(12)"
                    :class="{ active: videoNum == 12 }"
                    class="text-wrapper_3 flex-col"
                  >
                    <span class="text_10">南车间西门</span>
                  </div>
                  <div
                    @click="onVideoClick(13)"
                    :class="{ active: videoNum == 13 }"
                    class="text-wrapper_4 flex-col"
                  >
                    <span class="text_11">南车间中段</span>
                  </div>
                  <div
                    @click="onVideoClick(14)"
                    :class="{ active: videoNum == 14 }"
                    class="text-wrapper_5 flex-col"
                  >
                    <span class="text_12">南车间主通道</span>
                  </div>
                  <div
                    @click="onVideoClick(15)"
                    :class="{ active: videoNum == 15 }"
                    class="text-wrapper_6 flex-col"
                  >
                    <span class="text_13">南车间东门</span>
                  </div>
                </div>
                <iframe :key="videoNum" class="image_3" :src="videoUrl"></iframe>
                <span class="text_14">车间数据</span>
              </div>
              <div class="box_5 flex-col">
                <div class="block_1 flex-row">
                  <img
                    class="image_4"
                    referrerpolicy="no-referrer"
                    src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngb3e5a412e0e750357a8aabdd57881cd64fdaf59962bd6c9739a520a8d294a2e7"
                  />
                  <div class="image-text_1 flex-row justify-between">
                    <div class="color1 block_2 flex-col"></div>
                    <span class="text-group_1">去年</span>
                  </div>
                  <div class="image-text_2 flex-row justify-between">
                    <div class="color2 section_2 flex-col"></div>
                    <span class="text-group_2">今年</span>
                  </div>
                  <div class="power1 image-text_1 flex-row justify-between">
                    <div class="color3 block_2 flex-col"></div>
                    <span class="text-group_1">去年</span>
                  </div>
                  <div class="power2 image-text_2 flex-row justify-between">
                    <div class="color4 section_2 flex-col"></div>
                    <span class="text-group_2">今年</span>
                  </div>

                  <div class="power3 image-text_1 flex-row justify-between">
                    <div class="color5 block_2 flex-col"></div>
                    <span class="text-group_1">去年</span>
                  </div>
                  <div class="power4 image-text_2 flex-row justify-between">
                    <div class="color6 section_2 flex-col"></div>
                    <span class="text-group_2">今年</span>
                  </div>
                  <div class="power5">商用产线耗电量：</div>
                  <div class="power6">实验室被测机耗电量：</div>
                  <div class="power7">实验室设备间耗电量：</div>
                </div>
                <span class="text_15">单位:&nbsp;kW·h</span>
                <div id="power" class="block_3 flex-row justify-between"></div>
                <span class="text_34">电能数据</span>
              </div>
            </div>
            <div class="group_5 flex-col justify-between">
              <div class="box_6 flex-col">
                <img
                  class="image_17"
                  referrerpolicy="no-referrer"
                  src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngb3e5a412e0e750357a8aabdd57881cd64fdaf59962bd6c9739a520a8d294a2e7"
                />
                <div class="box_7 flex-row">
                  <div class="group_6 flex-col justify-between">
                    <span class="text_35 top"
                      >安规检测仪
                      <span :class="{ reds: isRed('productionLineCommercial', true) }">
                        {{ getText('productionLineCommercial') }}</span
                      >
                    </span>
                    <div
                      :class="{ red: isRed('productionLineCommercial') }"
                      class="breathing block_4 flex-col"
                    ></div>
                  </div>
                  <span class="text_36 top"
                    >在线测试
                    <span :class="{ reds: isRed('productionLineCommercial', true) }">
                      {{ getText('productionLineCommercial') }}</span
                    ></span
                  >
                  <span class="text_37 top"
                    >卤检仪<span :class="{ reds: isRed('productionLineCommercial', true) }">{{
                      getText('productionLineCommercial')
                    }}</span></span
                  >
                </div>
                <div class="box_8 flex-col">
                  <div class="box_9 flex-row">
                    <div
                      :class="{ red: isRed('productionLineCommercial') }"
                      class="breathing block_5 flex-col"
                    ></div>
                  </div>
                  <div class="box_10 flex-row">
                    <span class="text_38 top"
                      >传送带
                      <span :class="{ reds: isRed('productionLineCommercial', true) }">
                        {{ getText('productionLineCommercial') }}</span
                      >
                    </span>
                    <div
                      :class="{ red: isRed('productionLineCommercial') }"
                      class="breathing block_6 flex-col"
                    ></div>
                    <div class="block_7 flex-col justify-between">
                      <span class="text_39 top"
                        >充冷媒机
                        <span :class="{ reds: isRed('productionLineCommercial', true) }">{{
                          getText('productionLineCommercial')
                        }}</span>
                      </span>
                      <div
                        :class="{ red: isRed('productionLineCommercial') }"
                        class="breathing block_8 flex-col"
                      ></div>
                    </div>
                    <span class="text_40 top"
                      >真空机
                      <span :class="{ reds: isRed('productionLineCommercial', true) }">{{
                        getText('productionLineCommercial')
                      }}</span>
                    </span>
                  </div>
                  <div class="box_11 flex-row">
                    <div
                      :class="{ red: isRed('suspensionArmStatus') }"
                      class="breathing box_12 flex-col"
                    ></div>
                    <div
                      :class="{ red: isRed('productionLineCommercial') }"
                      class="breathing box_13 flex-col"
                    ></div>
                    <div
                      :class="{ red: isRed('productionLineCommercial') }"
                      class="breathing box_14 flex-col"
                    ></div>
                  </div>
                  <div class="box_15 flex-row">
                    <span class="text_41 under"
                      >悬臂吊
                      <span :class="{ reds: isRed('suspensionArmStatus', true) }">{{
                        getText('suspensionArmStatus')
                      }}</span>
                    </span>
                    <div class="section_3 flex-col justify-between">
                      <span class="text_42 top"
                        >悬臂吊<span :class="{ reds: isRed('productionLineCommercial', true) }">{{
                          getText('productionLineCommercial')
                        }}</span></span
                      >
                      <div
                        :class="{ red: isRed('productionLineCommercial') }"
                        class="breathing group_7 flex-col"
                      ></div>
                    </div>
                    <span class="text_43">商用生产线</span>
                  </div>
                  <div class="box_16 flex-row">
                    <div class="section_4 flex-col justify-between">
                      <div
                        :class="{ red: isRed('safetyTestDeviceStatus') }"
                        class="breathing group_8 flex-col"
                      ></div>
                      <span class="text_44 under"
                        >安规检测仪
                        <span :class="{ reds: isRed('safetyTestDeviceStatus', true) }">{{
                          getText('safetyTestDeviceStatus')
                        }}</span>
                      </span>
                    </div>
                    <div class="section_5 flex-col justify-between">
                      <div
                        :class="{ red: isRed('onlineTestDeviceStatus') }"
                        class="breathing block_9 flex-col"
                      ></div>
                      <span class="text_45 under"
                        >在线测试
                        <span :class="{ reds: isRed('onlineTestDeviceStatus', true) }">{{
                          getText('onlineTestDeviceStatus')
                        }}</span>
                      </span>
                    </div>
                    <div class="section_6 flex-col justify-between">
                      <div
                        :class="{ red: isRed('productionLineConveyor') }"
                        class="breathing block_10 flex-col"
                      ></div>
                      <span class="text_46 under"
                        >传送带<span :class="{ reds: isRed('productionLineConveyor', true) }">{{
                          getText('productionLineConveyor')
                        }}</span></span
                      >
                    </div>
                  </div>
                  <div class="box_17 flex-row">
                    <div
                      :class="{ red: isRed('productionLineHalogen') }"
                      class="breathing box_18 flex-col"
                    ></div>
                  </div>
                  <div class="box_19 flex-row">
                    <span class="text_47 under"
                      >卤检仪<span :class="{ reds: isRed('productionLineHalogen', true) }">{{
                        getText('productionLineHalogen')
                      }}</span></span
                    >
                    <div class="group_9 flex-col justify-between">
                      <div
                        :class="{ red: isRed('productionLineHalogen') }"
                        class="breathing group_10 flex-col"
                      ></div>
                      <span class="text_48 under"
                        >充冷媒机<span :class="{ reds: isRed('productionLineHalogen', true) }">{{
                          getText('productionLineHalogen')
                        }}</span></span
                      >
                    </div>
                    <div
                      :class="{ red: isRed('productionLineHalogen') }"
                      class="breathing group_11 flex-col"
                    ></div>
                    <span class="text_49">户用生产线</span>
                  </div>
                  <div class="text-wrapper_9 flex-row">
                    <span class="text_50 under"
                      >真空机<span :class="{ reds: isRed('productionLineHalogen', true) }">{{
                        getText('productionLineHalogen')
                      }}</span></span
                    >
                  </div>
                </div>
                <span class="text_51">生产线</span>
              </div>
              <div class="box_20 flex-col">
                <div class="box_21 flex-row">
                  <img
                    class="image_18"
                    referrerpolicy="no-referrer"
                    src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngb3e5a412e0e750357a8aabdd57881cd64fdaf59962bd6c9739a520a8d294a2e7"
                  />
                  <span class="text_52">格暖超低温实验室</span>
                </div>
                <div class="box_22 flex-row justify-between">
                  <img
                    class="image_19"
                    referrerpolicy="no-referrer"
                    src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngf7e2720f6fa9a06038b4d4a8b417ec40a44f7ed184b690904bed0875eaa444c4"
                  />
                  <div class="grid_1 flex-row">
                    <div
                      class="list-items_1 flex-row"
                      v-for="(item, index) in loopData"
                      :key="index"
                    >
                      <div class="text-wrapper_10 flex-col">
                        <span class="text_53" v-html="item.lanhutext"></span>
                      </div>
                      <span class="text_54">
                        {{ tcpDeviceData[item.lanhutext1] }}{{ item.unit }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="group_12 flex-col justify-between">
              <div class="group_13 flex-col">
                <div class="image-wrapper_3 flex-row">
                  <img
                    class="image_20"
                    referrerpolicy="no-referrer"
                    src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngb3e5a412e0e750357a8aabdd57881cd64fdaf59962bd6c9739a520a8d294a2e7"
                  />
                </div>
                <div class="box_23 flex-row justify-between">
                  <div class="text-wrapper_11 flex-col justify-between">
                    <span style="color: #fff" class="text_55">当前天气：{{ weather.text }}</span>
                    <span style="color: #fff" class="text_56">当前温度：{{ weather.temp }}℃</span>
                    <span style="color: #fff" class="text_57">风向：{{ weather.windDir }}</span>
                  </div>
                  <!-- <img v-if="weather.text === '雨'" class="image_21" referrerpolicy="no-referrer" src="https://a.hecdn.net/img/common/icon/202106d/302.png" /> -->

                  <img
                    class="image_21"
                    referrerpolicy="no-referrer"
                    :src="`https://a.hecdn.net/img/common/icon/202106d/${weather.icon}.png`"
                  />
                  <!-- <img v-else-if="weather.text === '晴'" class="image_21" referrerpolicy="no-referrer" src="https://a.hecdn.net/img/common/icon/202106d/100.png" />
                  <img
                    v-else
                    class="image_21"
                    referrerpolicy="no-referrer"
                    src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnge4f1e724fed100b64d34fe9d4c2c7d836ff2447f285880e49f24a927e9ba399a" /> -->
                </div>
                <div class="text-wrapper_12 flex-row">
                  <span style="color: #fff" class="text_58">风力：{{ weather.windScale }}级</span>
                </div>
                <div class="text-wrapper_13 flex-row">
                  <span style="color: #fff" class="text_59">湿度：{{ weather.humidity }}%</span>
                </div>
                <span class="text_60">天气</span>
              </div>
              <div class="group_14 flex-col">
                <img
                  class="image_22"
                  referrerpolicy="no-referrer"
                  src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngb3e5a412e0e750357a8aabdd57881cd64fdaf59962bd6c9739a520a8d294a2e7"
                />
                <div class="box_24 flex-col">
                  <div class="text-wrapper_14">
                    <span style="margin-left: -8px" class="text_61">{{
                      detail.temperatureHumidity ? detail.temperatureHumidity.temperature : ''
                    }}</span>
                    <span class="text_62">℃</span>
                  </div>
                </div>
                <span class="text_63">温度</span>
                <div class="box_25 flex-row justify-between">
                  <div class="group_15 flex-col justify-between">
                    <div class="group_16 flex-col">
                      <div style="margin-left: 20px" class="text-wrapper_15">
                        <span class="text_64">{{
                          detail.temperatureHumidity ? detail.temperatureHumidity.humidity : ''
                        }}</span>
                        <span class="text_65">%</span>
                      </div>
                    </div>
                    <span class="text_66">湿度</span>
                  </div>
                  <div class="group_17 flex-col justify-between">
                    <div class="box_26 flex-col">
                      <div class="text-wrapper_16">
                        <span class="text_67">{{
                          detail.pressureSensor ? toFixed(detail.pressureSensor.pressure, 1) : ''
                        }}</span>
                        <span class="text_68">KPa</span>
                      </div>
                    </div>
                    <span class="text_69">气压</span>
                  </div>
                </div>
                <span class="text_70">车间环境</span>
              </div>
              <div class="group_18 flex-col">
                <div class="box_27 flex-row">
                  <img
                    class="image_23"
                    referrerpolicy="no-referrer"
                    src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngb3e5a412e0e750357a8aabdd57881cd64fdaf59962bd6c9739a520a8d294a2e7"
                  />
                  <div class="box_28 flex-col"></div>
                  <span class="text_71">去年</span>
                  <div class="box_29 flex-col"></div>
                  <span class="text_72">今年</span>
                </div>
                <span class="text_15 water-unit">单位:&nbsp;m³/h</span>
                <div id="water" class="box_30 flex-row justify-between"></div>
                <span class="text_90">用水数据</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import * as ScreenApi from '@/api/dashboard/workbench'
import * as echarts from 'echarts'
import { ref, reactive, onMounted, onUnmounted } from 'vue'
function debounce(fn, delay) {
  let timer: any = null
  return () => {
    if (timer) {
      clearTimeout(timer)
      timer = setTimeout(fn, delay)
    } else {
      timer = setTimeout(fn, delay)
    }
  }
}

const detail: any = reactive({
  annualOrderAmount: '',
  annualOrderCount: '',
  powerMeter: {
    powerMeter1: {
      currentYearData: '',
      lastYearData: ''
    },
    powerMeter2: {
      currentYearData: '',
      lastYearData: ''
    },
    powerMeter3: {
      currentYearData: '',
      lastYearData: ''
    }
  },
  waterMeter: { waterMeter1: { currentYearData: '', lastYearData: '' } },
  temperatureHumidity: {},
  pressureSensor: {}
})
const loopData = [
  { lanhutext: '大气压力', lanhutext1: 'atmosphericPressure', unit: 'Kpa' },
  { lanhutext: '水温差', lanhutext1: 'waterTemperatureDifference', unit: '℃' },
  { lanhutext: '室外侧干球温度', lanhutext1: 'ambientDryBulbTemperature', unit: '℃' },
  { lanhutext: '水流量', lanhutext1: 'waterFlowRate', unit: 'm³/h' },
  { lanhutext: '室外侧湿球温度', lanhutext1: 'ambientWetBulbTemperature', unit: '℃' },
  { lanhutext: '输入总功率', lanhutext1: 'testedMachinePower', unit: 'kW' },
  { lanhutext: '室外侧相对湿度', lanhutext1: 'ambientRelativeHumidity', unit: '%' },
  { lanhutext: '水侧换热量', lanhutext1: 'waterSideHeatExchange', unit: 'kW' },
  { lanhutext: '进水温度', lanhutext1: 'inletWaterTemperature', unit: '℃' },
  { lanhutext: '能效比', lanhutext1: 'energyEfficiencyRatio', unit: 'kW/kW' },
  { lanhutext: '出水温度', lanhutext1: 'outletWaterTemperature', unit: '℃' },
  { lanhutext: '水阻力', lanhutext1: 'waterResistance', unit: 'kPa' }
]
const constants = reactive({})
const nowDay = ref('')
const tcpDeviceData = ref({})
const videoUrl = ref('')
const weather = ref({})
const videoNum = ref(12)
let videoToken = ''
const onVideoClick = (num) => {
  videoNum.value = num
  videoUrl.value = `https://open.ys7.com/console/jssdk/mobile.html?accessToken=${videoToken}&url=ezopen://HBVHVA@open.ys7.com/779301987/${num}.live`
}
const parseTime = (time, cFormat) => {
  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
      time = parseInt(time)
    }
    if (typeof time === 'number' && time.toString().length === 10) {
      time = time * 1000
    }
    date = new Date(time)
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  }
  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
    let value = formatObj[key]
    // Note: getDay() returns 0 on Sunday
    if (key === 'a') {
      return ['日', '一', '二', '三', '四', '五', '六'][value]
    }
    if (result.length > 0 && value < 10) {
      value = '0' + value
    }
    return value || 0
  })
  return time_str
}

const toFixed = (num, decimals = 2) => {
  if (num === undefined || num === null || isNaN(num)) return '0.00'
  return parseFloat(num).toFixed(decimals)
}

const transW = (num) => {
  if (num === undefined || num === null || num === '' || isNaN(num)) return '0.00'
  num = parseFloat(num)
  if (num < 10000) return num.toFixed(2)
  return (num / 10000).toFixed(2)
}

const setWaterEchart = () => {
  var chartDom = document.getElementById('water')
  var myChart = echarts.init(chartDom)
  const waterMeter1: any = detail.waterMeter ? detail.waterMeter?.waterMeter1 : []
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '8%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisLabel: { color: '#fff' },
      axisLine: { lineStyle: { color: '#fff' } }
    },
    yAxis: {
      type: 'value',
      axisLabel: { color: '#fff' },
      splitLine: { lineStyle: { color: '#fff' } }
    },
    series: [
      {
        name: '去年',
        type: 'line',
        data: waterMeter1.lastYearData,
        smooth: true,
        lineStyle: { color: 'rgb(30, 107, 255)' }
      },
      {
        name: '今年',
        type: 'line',
        data: waterMeter1.currentYearData,
        smooth: true,
        lineStyle: { color: 'rgb(249, 94, 113)' }
      }
    ]
  }
  myChart.setOption(option)
}

const setPowerEchart = () => {
  var chartDom = document.getElementById('power')
  var powerChart: any = echarts.init(chartDom)
  const powerMeter1: any = detail.powerMeter ? detail.powerMeter?.powerMeter1 : []
  const powerMeter2: any = detail.powerMeter ? detail.powerMeter?.powerMeter2 : []
  const powerMeter3: any = detail.powerMeter ? detail.powerMeter?.powerMeter3 : []

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' }
    },
    grid: {
      left: '4%',
      right: '0%',
      bottom: '4%',
      top: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisLabel: { color: '#fff', fontSize: 13 },
      axisLine: { lineStyle: { color: '#fff' } }
    },
    yAxis: {
      type: 'value',
      axisLabel: { color: '#fff', fontSize: 16 },
      splitLine: { lineStyle: { color: 'rgba(255,255,255,0.3)' } }
    },
    series: [
      {
        name: '商用产线耗电量去年',
        type: 'bar',
        data: powerMeter1.lastYearData,
        barWidth: 5,
        itemStyle: {
          color: '#feb155'
        }
      },
      {
        name: '商用产线耗电量今年',
        type: 'bar',
        data: powerMeter1.currentYearData,
        barWidth: 5,
        itemStyle: {
          color: '#f05b5d'
        }
      },
      {
        name: '实验室被测机耗电量去年',
        type: 'bar',
        data: powerMeter2.lastYearData,
        barWidth: 5,
        itemStyle: {
          color: '#2066e6'
        }
      },
      {
        name: '实验室被测机耗电量今年',
        type: 'bar',
        data: powerMeter2.currentYearData,
        barWidth: 5,
        itemStyle: {
          color: '#4ad6ff'
        }
      },
      // 离隔壁间距

      {
        // 离隔壁间距
        // barGap: '100%',
        name: '实验室设备间耗电量去年',
        type: 'bar',
        data: powerMeter3.lastYearData,
        barWidth: 5,
        itemStyle: {
          color: '#0cb800'
        }
      },
      {
        name: '实验室设备间耗电量今年',
        type: 'bar',
        data: powerMeter3.currentYearData,
        barWidth: 5,
        itemStyle: {
          color: '#2f9668'
        }
      }
    ]
  }
  powerChart.setOption(option)
}
const getStatusKey = (status: string, flag: boolean) => {
  return status.substring(flag ? 1 : 0, flag ? 2 : 1)
}

const statusMap = {
  productionLineCommercial: () => detail.productionLineCommercial?.deviceStatus,
  safetyTestDeviceStatus: () => detail.productionLineOnlineTest?.safetyTestDeviceStatus,
  onlineTestDeviceStatus: () => detail.productionLineOnlineTest?.onlineTestDeviceStatus,
  suspensionArmStatus: () => detail.productionLineOnlineTest?.suspensionArmStatus,
  productionLineHalogen: () => detail.productionLineHalogen?.deviceStatus,
  productionLineConveyor: () => detail.productionLineConveyor?.deviceStatus
}

const getText = (name: string) => {
  const status = statusMap[name]?.()
  if (!status) return ''
  const key = getStatusKey(status, true) // 对于getText，使用flag=true，substring(1,2)
  return key === '0' ? '（待机）' : '（生产）'
}

const isRed = (name: string, flag: boolean) => {
  const status = statusMap[name]?.()
  if (!status) return true
  const key = getStatusKey(status, flag)
  return key === '0'
}

const getWeather = async () => {
  const { data }: any = await ScreenApi.getWeather()
  if (data.code == '200') {
    weather.value = data.now
  }
}

const getToken = async () => {
  videoToken = await ScreenApi.getToken()
  onVideoClick(12)
}

const getData = async () => {
  const newDetail = await ScreenApi.getInfo()
  tcpDeviceData.value = newDetail.tcpDeviceData
  Object.assign(detail, newDetail)
  setWaterEchart()
  setPowerEchart()
}

const handleTime = () => {
  nowDay.value = parseTime(new Date(), '{y}年{m}月{d}日 星期{a}')
}

onMounted(() => {
  // rem等比适配配置文件
  // 基准大小
  const baseSize = 16
  // 设置 rem 函数
  function setRem() {
    // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
    const scale = document.documentElement.clientWidth / 1920
    // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
    document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
  }
  // 初始化
  setRem()
  handleTime()
  getData()
  getToken()
  getWeather()

  const resizeHandler = debounce(() => {
    setRem()
    setPowerEchart()
    setWaterEchart()
  }, 500)
  window.addEventListener('resize', resizeHandler)

  const intervalId = setInterval(
    () => {
      getData()
      getWeather()
    },
    5 * 60 * 1000
  )

  onUnmounted(() => {
    window.removeEventListener('resize', resizeHandler)
    clearInterval(intervalId)
  })
})
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
